<template>
<div>
  <div>
    <headers></headers>
  </div>
     
    <div style="padding-left: 20%;">
    
   

    <el-card class="box-card" style="width:80%">
  <div slot="header"  class="clearfix">
    <el-button style="float: right; padding: 3px 0" type="text">题目列表</el-button>
  </div>
  <div  class="text item">
     <el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="Qid"
      label="题号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="Name"
      label="题目名称"
      width="180">
    </el-table-column>
      <el-table-column
      prop="adopt"
      label="通过率"
      width="180">
    </el-table-column>
    <el-table-column
      prop="Difficulty"
      label="难度"
      width="100"
      :filters="[{ text: '入门', value: '入门' }, { text: '简单', value: '简单' }]"
     
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.Difficulty}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column>
         <template slot-scope="scope">
        <el-button
          size="mini"
          @click="StartOj(scope.$index, scope.row)">开始编程</el-button>
        </template>
    </el-table-column>
  </el-table>
  </div>
</el-card>
    
</div>

<div class="Ranking">
     <img @click="openrank" style="width:60px;height=60px" src="../src/assets/rank.png"/>
   
    </div>
    <el-drawer
  title="排行榜"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <span>张三现在第一! 共计2题</span>
</el-drawer>

</div>
</template>

<script> 
import head from '../view/head.vue'
    export default{
        data(){
            return{
                tableData:[],
                   drawer: false,
        direction: 'ltr',
            }
        },
        components:{
          headers: head
        },
        mounted() {
          this.$getRequest('/Topic/GetTopicAll').then(res=>{
              this.tableData=res.data
          })  
        },
        methods:{
          openrank(){
            this.drawer=true
          },
           handleClose() {  
              this.drawer=false
         },
          StartOj(id,row){
             this.$router.push({path:'/Codeoj',query:{qid:row.Qid}});
            
            }
        }

    }
</script>
<style>
  .text {
    font-size: 14px;
  }
  .Ranking{
    float: left;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 600px;
  }
</style>